<template>
    <div class="form-tab">
        <div class="form-tab-header">
            <a-icon type="left" @click="pre" class="form-tab-page-op" v-show="pageCount > 1" />
            <span
                class="form-title"
                :class="{'active':item == currentItem}"
                v-for="(item, index) in data"
                :key="index"
                @click="showForm(item)"
                >{{ item.name }}</span>
             <a-icon type="right" class="form-tab-page-op" @click="next" v-show="pageCount > 1"/>
        </div>
        <iframe :src="formUrl" ref="iframe" frameborder="0" class="form-iframe" @load = "load"></iframe>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Tabs ,Icon} from "@h3/antd-vue";
import { listApi } from "@cloudpivot/api";
@Component({
    name: "FormTab",
    components: {
        ATabs: Tabs,
        ATabPane: Tabs.TabPane,
        AIcon: Icon
    },
})
export default class FormTab extends Vue {
    @Prop() data!: any;
    @Prop() total!: number;
    @Prop() pageSize: number = 10;
    mode: string = "top";
    currentItem: any = {};
    currentPage: number = 1;
    formUrl: string = "";
    get pageCount() {
        let pageCount: number = (window as any).parseInt(
            this.total / this.pageSize
        );
        if(this.total % this.pageSize != 0)
        {
            pageCount++;
        }
        return pageCount;
    }
    created() {
        if (this.data && this.data.length > 0) {
            this.currentItem = this.data[0];
        } 
    }
    @Watch("data")
    dataChange(oldVal, val) {
        if (this.data && this.data.length > 0) {
            this.currentItem = this.data[0];
        }
    }
    @Watch("currentItem")
    currentItemChange(oldVal, val) {
        this.getFormUrl();
    }

    getFormUrl() {
        let item = this.currentItem;
        const params = {
            bizObjectId: item.id,
            schemaCode: item.schemaCode,
        };
        listApi.getFormUrl(params).then((res: any) => {
            this.formUrl = res;
        });
    }
    showForm(item) {
        this.currentItem = item;
    }

    pre() {
        if (this.currentPage == 1) {
            return;
        }
        this.currentPage--;
        this.$emit("pageChange", this.currentPage, this.pageSize);
    }
    next() {
        debugger;
        if (this.currentPage == this.pageCount) {
            return;
        }
        this.currentPage++;
        this.$emit("pageChange", this.currentPage, this.pageSize);
    }

    load (){
        let iframe: any =  this.$refs.iframe;
        iframe.contentWindow.document.documentElement.style.height="auto"
        setTimeout(() => {
            //window.iframe111 = iframe;
            console.log(iframe.contentWindow.document.documentElement.offsetHeight)
            console.log(iframe.contentWindow.document.documentElement.clientHeight)
            iframe.style.height = (iframe.contentWindow.document.documentElement.offsetHeight+200) + "px";
        },1000)

        
    }
}
</script>
<style lang="less" scoped>
.form-tab-header{
    display:flex;
    justify-content: space-around;
    border-bottom:1px solid #ccc;
    margin-bottom:16px;
    
}
.form-iframe {
    width: 100%;
}
.form-tab-page-op{
    display:flex;
    align-items: center;
}
.form-title {
    margin: 0 10px;
    cursor: pointer;
    flex:1;
    overflow: hidden;
    text-align: center;
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0px;

    &.active{
        color:#2970ff;
        border-bottom:1px solid #2970ff;
        position: relative;

        bottom: -1px;
    }
}
</style>
